import { getWorkflowApprovalHistoryApprovalBusinessKeyV2ByBusinessKey } from '@/api';
import { PropType } from 'vue';
import { TApprovalHistoryData } from '@/components/business/Approval/approval-helper';
import { ApprovalProgress, useToggleIcon } from '../list';
import { ccInfoProvideKey } from '../list/item/CCInfo';
const ApprovalNode = defineComponent({
  props: {
    index: {
      type: Number,
      default: 0
    },
    data: {
      type: Object as PropType<TApprovalHistoryData>,
      default: null
    }
  },
  setup() {
    return {
      ...useToggleIcon(true)
    };
  },
  render() {
    return (
      <div class="mb-8">
        <div class="text-value-14_bold   inline-flex items-center mb-8" onClick={this.handleToggle}>
          {'第'}
          {this.index}
          {'次审批'} <span class="ml-4">{this.renderToggle()}</span>
        </div>
        {this.enable ? <ApprovalProgress data={this.data} /> : ''}
      </div>
    );
  }
});
export const HistoryApprovalList = defineComponent({
  props: {
    list: {
      type: Array as PropType<TApprovalHistoryData[]>,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    provide(ccInfoProvideKey, { mode: 'view' });
  },
  render() {
    if (!this.list.length && !this.loading) {
      return (
        <div class="text-label-16 flex h-full flex-col  items-center justify-center  bd-dashed p-16 rounded-4">
          <span class="mci-icon-inbox text-20px mb-4"></span>
          <div>{'暂无历史'}</div>
        </div>
      );
    }
    return this.list.map((item, index) => {
      return <ApprovalNode index={index + 1} data={item} />;
    });
  }
});

export const useApprovalHistory = () => {
  const historyLoading = ref(false);

  const historyData = ref<TApprovalHistoryData[]>([]);
  const getApprovalHistory = (type: string, businessKey: string) => {
    if (type === 'history') {
      historyLoading.value = true;
      getWorkflowApprovalHistoryApprovalBusinessKeyV2ByBusinessKey({
        businessKey
      })
        .then((res) => {
          historyData.value = res;
        })
        .finally(() => {
          historyLoading.value = false;
        });
    }
  };

  return {
    historyLoading,
    getApprovalHistory,
    historyData
  };
};
